<template>
    <div class="tuijian-wrap" :style="tjbg">
        <img src="../../assets/images/tjuser.jpg" alt="" class="tjuser">
        <div class="tuijian-form" :style="tjform">
            <section class="tjPhone">
                <input v-model="toMobileNo" type="number" placeholder="请输入您推荐用户的手机号码">
            </section>
            <section class="tjNumber">
                <input v-model="verifyCode" type="number" placeholder="请输入您的推荐码">
                <span @click="getVerifyCode">获取推荐码</span>
            </section>
            <section class="tjBtn" :style="tjBtn">
                <button @click="lookTJ">
                    <img src="../../assets/images/tjbtn1.png" alt="">
                </button>
                <button @click="getRecommend">
                    <img src="../../assets/images/tjbtn2.png" alt="">
                </button>
            </section>
        </div>
    </div>
</template>

<script>
import { MessageBox } from 'mint-ui'
import {mapActions} from 'vuex'
export default {
    data(){
        return{
            toMobileNo:'',
            verifyCode:'',
            tjbg:{
                backgroundImage: "url(" + require("../../assets/images/tjbg.jpg") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
                backgroundPosition: '50% 50%'
            },
            tjBtn:{
                backgroundImage: "url(" + require("../../assets/images/tjbg2.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
                backgroundPosition: '50% 50%'
            },
            tjform:{
                backgroundImage: "url(" + require("../../assets/images/tjbgb.jpg") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "100% 100%",
                backgroundPosition: '50% 50%'
            }
        }
    },
    methods:{
        ...mapActions({
            makeVerifyCode:'personModules/makeVerifyCode',
            makeRecommend:'personModules/makeRecommend'
        }),
        lookTJ(){
            this.$router.push({path: '/tuijianlist'})
        },
        getVerifyCode(){
            if(this.toMobileNo.length != 11){ MessageBox.alert('提示','请输入正确的手机号码'); return; }
            this.makeVerifyCode({mobileNo:this.toMobileNo,codeType:0});
        },
        getRecommend(){
            let params = {
                toMobileNo: this.toMobileNo,
                verifyCode: this.verifyCode
            }
            if(params.toMobileNo.length != 11){ MessageBox.alert('提示','请输入正确的手机号码'); return; }
            if(params.toMobileNo.length == ''){ MessageBox.alert('提示','请输入推荐码'); return; }
            this.makeRecommend(params);
        }
    }
}
</script>


<style lang="scss" scoped>
.tuijian-wrap{
    width: 100%;
    height: 100%;
    flex: auto;
    // overflow: hidden;
    img.tjuser{
        width: 100%;
    }
}
.tuijian-form{
    // padding-top: 86%;
    font-size: 14px;
    section{
        width: 90%;
        margin: 0 auto;
        &.tjPhone{
            margin-bottom: 10px;
            input{
                background: #fff;
                width: 100%;
                height: 40px;
                line-height: 40px;
                border: 3px solid #EA8336;
                border-radius: 10px;
                text-indent: 10px;
                color: #EA7B49;
                &::-webkit-input-placeholder{
                    color: #EA7B49;
                }
                &::-moz-input-placeholder{
                    color: #EA7B49;
                }
                &::-ms-input-placeholder{
                    color: #EA7B49;
                }
                &::-o-input-placeholder{
                    color: #EA7B49;
                }
            }
        }
        &.tjNumber{
            display: flex;
            justify-content: space-between;
            align-items: center;
            input{
                background: #fff;
                width: 50%;
                height: 40px;
                border: 3px solid #EA8336;
                border-radius: 10px;
                text-indent: 10px;
                color: #EA7B49;
                line-height: 40px;
                &::-webkit-input-placeholder{
                    color: #EA7B49;
                }
                &::-moz-input-placeholder{
                    color: #EA7B49;
                }
                &::-ms-input-placeholder{
                    color: #EA7B49;
                }
                &::-o-input-placeholder{
                    color: #EA7B49;
                }
            }
            span{
                display: block;
                background: #FFF2BD;
                padding: 5px 20px;
                border-radius: 20px;
                color: #EA7B49;
                box-shadow: 1px 5px 4px rgba(228,94,66,0.75)
            }
        }
        &.tjBtn{
            display: flex;
            margin-top: 30px;
            padding: 25px 0;
            justify-content: space-between;
            align-items: center;
            button{
                border: none;
                background: none;
                justify-content: space-between;
                align-items: center;
                width: 40%;
                img{
                    max-width: 100%;                    
                }
            }
        }
    }
}
</style>

